import { produce } from "immer";
import { useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { useLoaderData, useNavigate } from "react-router";
import { useImmer } from "use-immer";
import { setAppName } from '@/store/modules/app'
function Home() {
    const [ person, setName ] = useImmer({ name: 'zhzangsan' })
    const navigate = useNavigate()
    const meta = useLoaderData()
    const app = useSelector(store => store.app)
    const disPatch = useDispatch()

    
    const handleClick = () => {
        navigate('/about')
    }
    const handleSet = () => {
        setName((person) => {
            person.name = '123'
        })
        // setName(produce((draft) => {
        //     draft = 123
        // }))
    }
    const setMyNamme = () => {
        disPatch(setAppName('new Name'))
    }
    return (
        <>
            <div>home {meta.title}</div>
            <div>store.app.name {app.name}</div>
            <div>
                <button onClick={setMyNamme}>setNamme</button>
            </div>
            <button onClick={handleSet}>set {person.name}</button>
            <button onClick={handleClick}>jump</button>
        </>
        );
}

export default Home;